<template>
    <view>
        <u-navbar :is-back="true" :title="navbar.title" :background="navbar.background">
            <view class="navbar-right" slot="right" >
                <view class="dot-box right-item">
                    <u-icon name="search" size="38"  @click="search.show = true"></u-icon>
                </view>
            </view>
        </u-navbar>
        <view class="u-page">
            <view class="item" v-for="(item, index) in testFlowableList" :key="item.tfId">
                <view class="top">
                            <view class="tfId">{{ item.tfId }}</view>
               
                            <view class="tfName">{{ item.tfName }}</view>
               
                            <view class="tfCode">{{ item.tfCode }}</view>
               
                            <view class="tfProcessInstanceId">{{ item.tfProcessInstanceId }}</view>
               
                            <view class="tfProcessState">{{ item.tfProcessState }}</view>
               
                </view>
                <view class="bottom">
                            {{$t('flowable.testFlowable.tfId')}}: {{ item.tfId }}<br>
                            <br/>
                            {{$t('flowable.testFlowable.tfName')}}: {{ item.tfName }}<br>
                            <br/>
                            {{$t('flowable.testFlowable.tfCode')}}: {{ item.tfCode }}<br>
                            <br/>
                            {{$t('flowable.testFlowable.tfProcessInstanceId')}}: {{ item.tfProcessInstanceId }}<br>
                            <br/>
                            {{$t('flowable.testFlowable.tfProcessState')}}: {{ item.tfProcessState }}<br>
                            <br/>
                    <u-icon name="edit-pen" :size="40" @click="edit(item)" color="#999999"></u-icon>
                </view>
            </view>
            <u-loadmore @loadmore="loadData" :status="status" :load-text="loadText" />
        </view>
        <footerBar ></footerBar>
        <u-popup border-radius="10" v-model="search.show"
                 :mode="search.mode"
                 length="70%" :mask="search.mask"
                 :closeable="search.closeable"
                 :close-icon-pos="search.closeIconPos"
        >
            <view style="">

                <u-card margin="70rpx 18rpx" box-shadow="1px 5px 12px 0px;" :title="$t('system.searchCondition')" >
                    <view class="" slot="body">
                        <u-form  >
							 <u-form-item >
								 <u-input :placeholder="$t('flowable.testFlowable.tfId')" v-model="searchForm.tfId" />
							 </u-form-item>
							 <u-form-item >
								 <u-input :placeholder="$t('flowable.testFlowable.tfName')" v-model="searchForm.tfName" />
							 </u-form-item>
							 <u-form-item >
								 <u-input :placeholder="$t('flowable.testFlowable.tfCode')" v-model="searchForm.tfCode" />
							 </u-form-item>
							 <u-form-item >
								 <u-input :placeholder="$t('flowable.testFlowable.tfProcessInstanceId')" v-model="searchForm.tfProcessInstanceId" />
							 </u-form-item>
							 <u-form-item >
								 <u-input :placeholder="$t('flowable.testFlowable.tfProcessState')" v-model="searchForm.tfProcessState" />
							 </u-form-item>
                        </u-form>
                    </view>
                </u-card>
                <u-row gutter="16" style="    width: 86%;margin: 0 auto;">
                    <u-col span="6">
                        <u-button size="medium" @click="searchReset">{{$t('system.reset')}}</u-button>
                    </u-col>
                    <u-col span="6">
                        <u-button size="medium" type="error" @click="searchConfirm">{{$t('system.confirm')}}</u-button>
                    </u-col>
                </u-row>
            </view>
        </u-popup>
    </view>
</template>

<script>
    import request from "utils/request.js"
    export default {
        data() {
            return {
                //所有的下拉选项
                options:{
                },
                //搜索表单
                searchForm: {
                    tfId: "" ,
                    tfName: "" ,
                    tfCode: "" ,
                    tfProcessInstanceId: "" ,
                    tfProcessState: "" ,
                    pageNo: 1,
                    pageSize: 10
                },
                // 搜索相关信息
                search:{
                    show: false,
                    closeable: true,
                    mode: "right",
                    closeIconPos: 'top-right'
                },
                page: {
                    pageSizes: [10, 20, 50, 100],
                    pageSize: 10,
                    total: 0,
                    currentPage: 0
                },
                testFlowableList: [],
                status:"loadmore",
                loadText: {
                    loadmore: this.$t('system.loadBefore'),
                    loading: this.$t('system.loadBefore'),
                    nomore: this.$t('system.nomore'),
                },
                navbar:{
                    title: this.$t('system.testFlowable.testFlowableInfo'),
                    background: {
                        backgroundColor: '#001f3f',
                        backgroundImage: 'linear-gradient(45deg, rgb(28, 187, 180), rgb(141, 198, 63))'
                    }
                },
                translation: {
                },
            };
        },
        onLoad() {
            this.getList();
        },
        methods: {
            loadData(){
                this.getList();
            },
            //查询列表
            getList() {
                let _this = this;
                this.searchForm['pageNo'] = this.page.currentPage + 1
                this.searchForm['pageSize'] = this.page.pageSize
                request({
                    url: '/flowable/testFlowable/queryByPage',
                    method: 'post',
                    data: this.searchForm
                }).then(response => {
                    if(_this.page.currentPage + 1 == response.data.pageNum){
                    _this.testFlowableList = [..._this.testFlowableList,...response.data.list]
                }
                _this.page.total = response.data.total
                _this.page.currentPage = response.data.pageNum
            })
            },
            // 编辑或新增信息
            edit(testFlowable){
                this.$u.route({
                    url: "/pages/flowable/test-flowable/test-flowable-edit?testFlowableInfo=" + JSON.stringify(testFlowable)
                })
            },
            searchConfirm(){
                this.search.show = false;
                this.testFlowableList = [];
                this.page.currentPage = 0;
                this.getList();
            },
        }
    };
</script>

<style lang="scss" scoped>
.item {
    padding: 40rpx 20rpx;
    .top {
        display: flex;
        font-weight: bold;
        font-size: 34rpx;
        .phone {
            margin-left: 60rpx;
        }
        .tag {
            display: flex;
            font-weight: normal;
            align-items: center;
            text {
                    display: block;
                    width: 60rpx;
                    height: 34rpx;
                    line-height: 34rpx;
                    color: #ffffff;
                    font-size: 20rpx;
                    border-radius: 6rpx;
                    text-align: center;
                    margin-left: 30rpx;
                    background-color:rgb(49, 145, 253);
                }
            .red{
                background-color:red
            }
        }
    }
    .bottom {
        display: flex;
        margin-top: 20rpx;
        font-size: 28rpx;
        justify-content: space-between;
        color: #999999;
    }
}
.addSite {
    display: flex;
    justify-content: space-around;
    width: 600rpx;
    line-height: 100rpx;
    position: absolute;
    bottom: 30rpx;
    left: 80rpx;
    background-color: red;
    border-radius: 60rpx;
    font-size: 30rpx;
    .add{
        display: flex;
        align-items: center;
        color: #ffffff;
        .icon{
            margin-right: 10rpx;
        }
    }
}
</style>
